<template>
  <view class="job-publish-page">
    <!-- 顶部导航栏 -->
    <view class="header-nav">
      <view class="nav-content">
        <text class="nav-title">请完善招聘信息</text>
        <text class="nav-hint">请填写</text>
      </view>
    </view>

    <!-- 表单内容 -->
    <Form
      :fields="formFields"
      :model="formData"
      variant="vertical"
      :show-header="false"
      :show-footer="false"
      @field-input="handleFieldInput"
      @field-select="handleFieldSelect"
      @field-date-select="handleDateSelect"
    >
      <!-- 自定义薪资输入 -->
      <template #salary-input>
        <view class="salary-input-container">
          <view class="salary-type-tabs">
            <view 
              class="salary-tab" 
              :class="{ active: formData.salaryType === 'fixed' }"
              @click="selectSalaryType('fixed')"
            >
              <text>固定薪资</text>
              <view class="tab-underline" v-if="formData.salaryType === 'fixed'"></view>
            </view>
            <view 
              class="salary-tab" 
              :class="{ active: formData.salaryType === 'range' }"
              @click="selectSalaryType('range')"
            >
              <text>范围薪资</text>
              <view class="tab-underline" v-if="formData.salaryType === 'range'"></view>
            </view>
          </view>
          <view class="salary-input-wrapper">
            <input 
              class="salary-input" 
              v-model="formData.salaryMin" 
              placeholder="最低薪资"
            />
            <text class="salary-separator" v-if="formData.salaryType === 'range'">-</text>
            <input 
              class="salary-input" 
              v-model="formData.salaryMax" 
              placeholder="最高薪资"
              v-if="formData.salaryType === 'range'"
            />
            <text class="salary-unit">元/月</text>
          </view>
        </view>
      </template>
    </Form>

    <!-- 其他表单内容 -->
    <view class="additional-form-content">
      <!-- 职位描述 -->
      <view class="form-item required">
        <view class="form-label">
          <text class="required-mark">*</text>
          <text class="label-text">职位描述</text>
        </view>
        <textarea 
          class="form-textarea" 
          v-model="formData.jobDescription" 
          placeholder="请填写职位描述"
        ></textarea>
        <view class="description-template">
          <view class="template-title">【工作内容】</view>
          <view class="template-item">1、负责店面收银、结算、理账</view>
          <view class="template-item">2、遵守各项制度与操作程序,确保所有程序都按照公司的账目标准。</view>
          <view class="template-title">【工作要求】</view>
          <view class="template-item">1、为人诚恳、品行端正</view>
        </view>
      </view>

      <!-- 联系电话 -->
      <view class="form-row required">
        <view class="row-label">
          <text class="required-mark">*</text>
          <text class="label-text">联系电话</text>
        </view>
        <input 
          class="row-input" 
          v-model="formData.contactPhone" 
          placeholder="请填写"
          type="number"
        />
      </view>

      <!-- 性别 -->
      <view class="form-row">
        <view class="row-label">
          <text class="label-text">性别</text>
        </view>
        <view class="row-content">
          <view 
            class="gender-option" 
            v-for="(gender, index) in genderOptions" 
            :key="index"
            :class="{ active: formData.gender === gender.value }"
            @click="selectGender(gender.value)"
          >
            <view class="radio-button" :class="{ checked: formData.gender === gender.value }">
              <text v-if="formData.gender === gender.value" class="iconfont-v2 icon-dagou"></text>
              <text v-else class="iconfont-v2 icon-yuanxing-weigouxuan"></text>
            </view>
            <text class="option-text">{{ gender.label }}</text>
          </view>
        </view>
      </view>

      <!-- 年龄 -->
      <view class="form-row">
        <view class="row-label">
          <text class="label-text">年龄</text>
        </view>
        <view class="row-select" @click="showAgePicker">
          <text>{{ formData.age || '不限' }}</text>
          <text class="iconfont-v2 icon-arrow-right"></text>
        </view>
      </view>

      <!-- 学历 -->
      <view class="form-row">
        <view class="row-label">
          <text class="label-text">学历</text>
        </view>
        <view class="row-select" @click="showEducationPicker">
          <text>{{ formData.education || '不限' }}</text>
          <text class="iconfont-v2 icon-arrow-right"></text>
        </view>
      </view>

      <!-- 工作时段 -->
      <view class="form-row">
        <view class="row-label">
          <text class="label-text">工作时段</text>
        </view>
        <view class="row-select" @click="showSchedulePicker">
          <text>{{ formData.workSchedule || '不限' }}</text>
          <text class="iconfont-v2 icon-arrow-right"></text>
        </view>
      </view>

      <!-- 福利与提成 -->
      <view class="form-row">
        <view class="row-label">
          <text class="label-text">福利与提成</text>
        </view>
        <view class="row-content">
          <view 
            class="benefit-tag" 
            v-for="(benefit, index) in benefitTags" 
            :key="index"
            :class="{ active: benefit.selected }"
            @click="toggleBenefit(index)"
          >
            <text>{{ benefit.name }}</text>
          </view>
        </view>
      </view>

      <!-- 其他 -->
      <view class="form-row">
        <view class="row-label">
          <text class="label-text">其他</text>
        </view>
        <view class="row-content">
          <text class="other-text">{{ formData.other || '身高、健康证' }}</text>
        </view>
      </view>
    </view>

    <!-- 底部发布按钮 -->
    <view class="publish-button" @click="publishJob">
      <text>确认发布</text>
    </view>

    <!-- 选择器弹窗 -->
    <view class="picker-modal" v-if="showPicker" @click="hidePicker">
      <view class="picker-content" @click.stop>
        <view class="picker-header">
          <text class="picker-title">{{ pickerTitle }}</text>
          <text class="iconfont-v2 icon-close" @click="hidePicker"></text>
        </view>
        <view class="picker-options">
          <view 
            class="picker-option" 
            v-for="(option, index) in pickerOptions" 
            :key="index"
            @click="selectOption(option)"
          >
            <text>{{ option.label }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import Form from '@/components/common/Form.vue'

export default {
  name: 'JobPublishPage',
  components: {
    Form
  },
  data() {
    return {
      formData: {
        jobTitle: '',
        salaryType: 'fixed', // fixed: 固定薪资, range: 范围薪资
        salary: '',
        salaryUnit: '元/小时',
        paymentCycle: '日结',
        jobDescription: '',
        contactPhone: '',
        gender: '男',
        age: '',
        education: '',
        workSchedule: '',
        benefits: '社保',
        other: '身高、健康证'
      },
      formFields: [
        {
          name: 'jobTitle',
          label: '职位标题',
          type: 'text',
          placeholder: '请填写',
          required: true
        },
        {
          name: 'salary',
          label: '薪资',
          type: 'slot',
          slotName: 'salary-input',
          required: true
        },
        {
          name: 'paymentCycle',
          label: '结算周期',
          type: 'select',
          placeholder: '请选择',
          options: [
            { label: '日结', value: '日结' },
            { label: '月结', value: '月结' },
            { label: '周结', value: '周结' },
            { label: '完工结', value: '完工结' },
            { label: '面议', value: '面议' }
          ],
          required: true
        },
        {
          name: 'jobDescription',
          label: '职位描述',
          type: 'textarea',
          placeholder: '请详细描述工作内容、要求等',
          required: true
        },
        {
          name: 'contactPhone',
          label: '联系电话',
          type: 'text',
          placeholder: '请填写',
          required: true
        },
        {
          name: 'gender',
          label: '性别要求',
          type: 'radio',
          options: [
            { label: '男', value: '男' },
            { label: '女', value: '女' },
            { label: '不限', value: '不限' }
          ],
          required: true
        },
        {
          name: 'age',
          label: '年龄要求',
          type: 'text',
          placeholder: '如：18-35岁'
        },
        {
          name: 'education',
          label: '学历要求',
          type: 'select',
          placeholder: '请选择',
          options: [
            { label: '不限', value: '不限' },
            { label: '初中', value: '初中' },
            { label: '高中', value: '高中' },
            { label: '大专', value: '大专' },
            { label: '本科', value: '本科' },
            { label: '硕士', value: '硕士' },
            { label: '博士', value: '博士' }
          ]
        },
        {
          name: 'workSchedule',
          label: '工作时间',
          type: 'text',
          placeholder: '如：周一至周五 9:00-18:00'
        },
        {
          name: 'benefits',
          label: '福利待遇',
          type: 'checkbox',
          options: [
            { label: '社保', value: '社保' },
            { label: '公积金', value: '公积金' },
            { label: '餐补', value: '餐补' },
            { label: '交通补贴', value: '交通补贴' },
            { label: '年终奖', value: '年终奖' },
            { label: '带薪年假', value: '带薪年假' }
          ]
        },
        {
          name: 'other',
          label: '其他要求',
          type: 'textarea',
          placeholder: '如：身高、健康证等'
        }
      ],
      paymentCycles: [
        { label: '日结', value: '日结' },
        { label: '月结', value: '月结' },
        { label: '周结', value: '周结' },
        { label: '完工结', value: '完工结' },
        { label: '面议', value: '面议' }
      ],
      genderOptions: [
        { label: '不限', value: '不限' },
        { label: '男', value: '男' },
        { label: '女', value: '女' }
      ],
      showPicker: false,
      pickerTitle: '',
      pickerOptions: [],
      currentPickerType: '',
      benefitTags: [
        { name: '社保', selected: true },
        { name: '其他', selected: true }
      ]
    }
  },
  methods: {
    selectSalaryType(type) {
      this.formData.salaryType = type;
    },
    selectPaymentCycle(cycle) {
      this.formData.paymentCycle = cycle;
    },
    selectGender(gender) {
      this.formData.gender = gender;
    },
    showUnitPicker() {
      this.pickerTitle = '选择单位';
      this.pickerOptions = [
        { label: '元/小时', value: '元/小时' },
        { label: '元/天', value: '元/天' },
        { label: '元/月', value: '元/月' },
        { label: '元/年', value: '元/年' }
      ];
      this.currentPickerType = 'unit';
      this.showPicker = true;
    },
    showAgePicker() {
      this.pickerTitle = '选择年龄';
      this.pickerOptions = [
        { label: '不限', value: '不限' },
        { label: '18-25岁', value: '18-25岁' },
        { label: '25-35岁', value: '25-35岁' },
        { label: '35-45岁', value: '35-45岁' },
        { label: '45岁以上', value: '45岁以上' }
      ];
      this.currentPickerType = 'age';
      this.showPicker = true;
    },
    showEducationPicker() {
      this.pickerTitle = '选择学历';
      this.pickerOptions = [
        { label: '不限', value: '不限' },
        { label: '初中', value: '初中' },
        { label: '高中', value: '高中' },
        { label: '大专', value: '大专' },
        { label: '本科', value: '本科' },
        { label: '硕士', value: '硕士' },
        { label: '博士', value: '博士' }
      ];
      this.currentPickerType = 'education';
      this.showPicker = true;
    },
    showSchedulePicker() {
      this.pickerTitle = '选择工作时段';
      this.pickerOptions = [
        { label: '不限', value: '不限' },
        { label: '早班(8:00-16:00)', value: '早班(8:00-16:00)' },
        { label: '中班(16:00-24:00)', value: '中班(16:00-24:00)' },
        { label: '夜班(24:00-8:00)', value: '夜班(24:00-8:00)' },
        { label: '全天', value: '全天' }
      ];
      this.currentPickerType = 'schedule';
      this.showPicker = true;
    },
    showBenefitsPicker() {
      this.pickerTitle = '选择福利';
      this.pickerOptions = [
        { label: '社保', value: '社保' },
        { label: '五险一金', value: '五险一金' },
        { label: '包吃包住', value: '包吃包住' },
        { label: '带薪休假', value: '带薪休假' },
        { label: '年终奖', value: '年终奖' }
      ];
      this.currentPickerType = 'benefits';
      this.showPicker = true;
    },
    showOtherPicker() {
      this.pickerTitle = '其他要求';
      this.pickerOptions = [
        { label: '身高、健康证', value: '身高、健康证' },
        { label: '无犯罪记录', value: '无犯罪记录' },
        { label: '有相关经验', value: '有相关经验' },
        { label: '会开车', value: '会开车' }
      ];
      this.currentPickerType = 'other';
      this.showPicker = true;
    },
    selectOption(option) {
      switch (this.currentPickerType) {
        case 'unit':
          this.formData.salaryUnit = option.value;
          break;
        case 'age':
          this.formData.age = option.value;
          break;
        case 'education':
          this.formData.education = option.value;
          break;
        case 'schedule':
          this.formData.workSchedule = option.value;
          break;
        case 'benefits':
          this.formData.benefits = option.value;
          break;
        case 'other':
          this.formData.other = option.value;
          break;
      }
      this.hidePicker();
    },
    hidePicker() {
      this.showPicker = false;
    },
    publishJob() {
      // 验证必填字段
      if (!this.formData.jobTitle) {
        uni.showToast({
          title: '请填写职位标题',
          icon: 'none'
        });
        return;
      }
      if (!this.formData.salary) {
        uni.showToast({
          title: '请填写薪资',
          icon: 'none'
        });
        return;
      }
      if (!this.formData.jobDescription) {
        uni.showToast({
          title: '请填写职位描述',
          icon: 'none'
        });
        return;
      }
      if (!this.formData.contactPhone) {
        uni.showToast({
          title: '请填写联系电话',
          icon: 'none'
        });
        return;
      }

      // 发布职位
      uni.showModal({
        title: '确认发布',
        content: '确定要发布这个职位吗？',
        success: (res) => {
          if (res.confirm) {
            uni.showToast({
              title: '职位发布成功',
              icon: 'success'
            });
            // 跳转到职位列表
            setTimeout(() => {
              uni.navigateBack();
            }, 1500);
          }
        }
      });
    },

    // 表单处理方法
    handleFieldInput(field, value) {
      this.formData[field.name] = value;
    },
    handleFieldSelect(field) {
      // 处理选择器显示
      this.pickerTitle = field.label;
      this.pickerOptions = field.options;
      this.currentPickerType = field.name;
      this.showPicker = true;
    },
    handleDateSelect(field) {
      // 处理日期选择
      uni.showToast({
        title: '日期选择功能待实现',
        icon: 'none'
      });
    },
    toggleBenefit(index) {
      this.benefitTags[index].selected = !this.benefitTags[index].selected;
    }
  }
}
</script>

<style lang="scss" scoped>
.job-publish-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding-bottom: 120rpx; // 为底部按钮留出空间
}

/* 顶部导航栏 */
.header-nav {
  background: white;
  padding: 20rpx 30rpx;
  padding-top: calc(20rpx + env(safe-area-inset-top));
  border-bottom: 2rpx solid #f0f0f0;
  
  .nav-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .nav-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }
    
    .nav-hint {
      font-size: 28rpx;
      color: #999;
    }
  }
}

/* 其他表单内容 */
.additional-form-content {
  background: white;
  margin: 20rpx 0;
  padding: 0 30rpx;
  
  .form-item {
    margin-bottom: 40rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    &.required {
      .form-label {
        .required-mark {
          color: #ED6567;
          margin-right: 8rpx;
        }
      }
    }
    
    .form-label {
      display: flex;
      align-items: center;
      margin-bottom: 16rpx;
      
      .label-text {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }
    }
    
    .form-input {
      width: 100%;
      height: 80rpx;
      background: #f8f9fa;
      border: 2rpx solid #e9ecef;
      border-radius: 12rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      color: #333;
      
      &:focus {
        border-color: #ED6567;
        background: white;
      }
    }
    
    .form-textarea {
      width: 100%;
      min-height: 200rpx;
      background: #f8f9fa;
      border: 2rpx solid #e9ecef;
      border-radius: 12rpx;
      padding: 24rpx;
      font-size: 28rpx;
      color: #333;
      line-height: 1.8;
      box-sizing: border-box;
      
      &:focus {
        border-color: #ED6567;
        background: white;
      }
    }
    
    .form-select {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 80rpx;
      background: #f8f9fa;
      border: 2rpx solid #e9ecef;
      border-radius: 12rpx;
      padding: 0 20rpx;
      font-size: 28rpx;
      color: #333;
      cursor: pointer;
      
      .iconfont-v2 {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
  
  /* 行式布局 - 与图片一致 */
  .form-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24rpx 0;
    border-bottom: 2rpx solid #f0f0f0;
    
    &:last-child {
      border-bottom: none;
    }
    
    &.required {
      .row-label {
        .required-mark {
          color: #ED6567;
          margin-right: 8rpx;
        }
      }
    }
    
    .row-label {
      display: flex;
      align-items: center;
      flex-shrink: 0;
      
      .label-text {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
      }
    }
    
    .row-input {
      flex: 1;
      text-align: right;
      height: 60rpx;
      line-height: 60rpx;
      background: transparent;
      border: none;
      font-size: 28rpx;
      color: #333;
      
      &::placeholder {
        color: #999;
      }
    }
    
    .row-select {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      flex: 1;
      height: 60rpx;
      font-size: 28rpx;
      color: #999;
      cursor: pointer;
      
      .iconfont-v2 {
        font-size: 20rpx;
        color: #999;
        margin-left: 8rpx;
      }
    }
    
    .row-content {
      display: flex;
      align-items: center;
      gap: 20rpx;
      flex: 1;
      justify-content: flex-end;
      flex-wrap: wrap;
      
      .benefit-tag {
        padding: 8rpx 20rpx;
        background: #f8f9fa;
        border: 2rpx solid #e9ecef;
        border-radius: 20rpx;
        font-size: 24rpx;
        color: #666;
        transition: all 0.2s ease;
        
        &.active {
          background: #ED6567;
          border-color: #ED6567;
          color: white;
        }
      }
      
      .other-text {
        font-size: 28rpx;
        color: #666;
        text-align: right;
      }
    }
  }
}

/* 表单区块样式 */
.form-section {
  margin-bottom: 40rpx;
  
  .section-label {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;
    
    &.required {
      .required-mark {
        color: #ED6567;
        margin-right: 8rpx;
        font-size: 28rpx;
        font-weight: 600;
      }
    }
    
    .label-text {
      font-size: 28rpx;
      color: #333;
      font-weight: 600;
    }
  }
  
  .section-input {
    width: 100%;
    height: 80rpx;
    background: #f8f9fa;
    border: 2rpx solid #e9ecef;
    border-radius: 12rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    color: #333;
    
    &:focus {
      border-color: #ED6567;
      background: white;
    }
  }
}

/* 薪资类型标签页 */
.salary-type-tabs {
  display: flex;
  margin-bottom: 20rpx;
  
  .salary-tab {
    position: relative;
    padding: 16rpx 0;
    margin-right: 40rpx;
    font-size: 28rpx;
    color: #666;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &.active {
      color: #ED6567;
      font-weight: 600;
    }
    
    .tab-underline {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 4rpx;
      background: #ED6567;
      border-radius: 2rpx;
    }
  }
}

/* 薪资输入容器 */
.salary-input-container {
  background: white;
  border: 2rpx solid #ED6567;
  border-radius: 12rpx;
  padding: 20rpx;
  
  .salary-input-row {
    display: flex;
    align-items: center;
    gap: 16rpx;
    margin-bottom: 20rpx;
    
    .salary-input {
      flex: 1;
      height: 60rpx;
      background: transparent;
      border: none;
      font-size: 28rpx;
      color: #333;
      
      &::placeholder {
        color: #999;
      }
    }
    
    .salary-unit-selector {
      display: flex;
      align-items: center;
      gap: 8rpx;
      padding: 12rpx 16rpx;
      background: #f8f9fa;
      border-radius: 8rpx;
      font-size: 26rpx;
      color: #666;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &:hover {
        background: #e9ecef;
      }
      
      .iconfont-v2 {
        font-size: 20rpx;
        color: #999;
      }
    }
  }
  
  .payment-cycle-buttons {
    display: flex;
    gap: 12rpx;
    flex-wrap: wrap;
    
    .cycle-button {
      padding: 12rpx 24rpx;
      background: #f8f9fa;
      border: 2rpx solid #e9ecef;
      border-radius: 20rpx;
      font-size: 24rpx;
      color: #666;
      cursor: pointer;
      transition: all 0.3s ease;
      
      &.active {
        background: #ED6567;
        color: white;
        border-color: #ED6567;
      }
      
      &:hover:not(.active) {
        background: #e9ecef;
        border-color: #dee2e6;
      }
    }
  }
}

  
.gender-option {
    display: flex;
    align-items: center;
    gap: 12rpx;
    cursor: pointer;
    
    .radio-button {
      width: 40rpx;
      height: 40rpx;
      border: 2rpx solid #ddd;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.3s ease;
      background: white;
      
      &.checked {
        background: #ED6567;
        border-color: #ED6567;
        
        .iconfont-v2 {
          font-size: 24rpx;
          color: white;
        }
      }
      
      &:not(.checked) {
        .iconfont-v2 {
          font-size: 24rpx;
          color: transparent;
        }
      }
    }
    
    .option-text {
      font-size: 28rpx;
      color: #333;
    }
  }
/* 职位描述模板 */
.description-template {
  margin-top: 20rpx;
  padding: 24rpx;
  background: #f8f9fa;
  border-radius: 12rpx;
  
  .template-title {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 16rpx;
    margin-top: 16rpx;
    
    &:first-child {
      margin-top: 0;
    }
  }
  
  .template-item {
    font-size: 26rpx;
    color: #666;
    line-height: 1.8;
    margin-bottom: 12rpx;
    padding-left: 0;
  }
}

/* 底部发布按钮 */
.publish-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background: #ED6567;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  font-weight: 600;
  color: white;
  cursor: pointer;
  transition: all 0.3s ease;
  
  &:hover {
    background: #d55a54;
  }
}

/* 选择器弹窗 */
.picker-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  
  .picker-content {
    background: white;
    width: 100%;
    max-height: 80vh;
    min-height: 50vh;
    border-radius: 24rpx 24rpx 0 0;
    
    .picker-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx;
      border-bottom: 2rpx solid #f0f0f0;
      position: relative;
      
      .picker-title {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        flex: 1;
        text-align: center;
      }
      
      .iconfont-v2 {
        position: absolute;
        right: 30rpx;
        top: 50%;
        transform: translateY(-50%);
        font-size: 36rpx;
        color: #666;
        cursor: pointer;
        width: 40rpx;
        height: 40rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #f5f5f5;
        border-radius: 50%;
        transition: all 0.3s ease;
        
        &:hover {
          background: #e9ecef;
          color: #333;
        }
        
        &:active {
          background: #dee2e6;
          transform: translateY(-50%) scale(0.95);
        }
      }
    }
    
    .picker-options {
      max-height: calc(80vh - 120rpx);
      overflow-y: auto;
      padding-bottom: 20rpx;
      
      .picker-option {
        padding: 32rpx 30rpx;
        border-bottom: 2rpx solid #f8f9fa;
        font-size: 28rpx;
        color: #333;
        cursor: pointer;
        transition: all 0.3s ease;
        display: flex;
        align-items: center;
        min-height: 80rpx;
        
        &:hover {
          background: #f8f9fa;
        }
        
        &:active {
          background: #e9ecef;
        }
        
        &:last-child {
          border-bottom: none;
        }
      }
    }
  }
}

</style>

